<div class="build-detail" style="background:#fff;padding:20px 40px 40px;">
    <div class="loader" ng-show="!databuild">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
        </div>
    </div>
    <div ng-show="databuild">
        <div class="panel panel-default" style="margin-bottom: 50px">
            <div class="panel-heading">
            <span class="panel-title">
                <span class="icon25 icon25-panel"></span>&nbsp;&nbsp;{{data.metadata.name}}
            </span>
                <a class="btn btn-gray pull-right" style=" padding: 5px 10px; margin-left: 15px; height:34px; width:36px" ng-click="deletes()"><i class="fa fa-trash-o fa-lg"></i></a>
                <a class="btn btn-green pull-right" ng-click="startBuild()">构建</a>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="media media-sm">
                            <div class="media-left">
                                <img class="media-object" src="views/build_detail/img/images_104.png">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">创建时间</h4>
                                <small style="color: #5a6378;" uib-tooltip="{{data.metadata.creationTimestamp | timescon}}">{{data.metadata.creationTimestamp | dateRelative}}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="media media-sm">
                            <div class="media-left">
                                <img class="media-object" src="views/build_detail/img/images_106.png">
                            </div>
                            <div class="media-body tell" style="width: 100%;">
                                <h4 class="media-heading">代码URL</h4>
                                <div class=till style='position: absolute; top: -6px; padding: 0 8px; border-radius:3px;white-space:nowrap; left: 0; background-color: black; color: white'>

                                    {{data.spec.source.git.uri}}
                                </div>
                                <small>
                                    <a class="href-orange text-overflow" href="{{data.spec.source.git.uri}}" target="_blank" style="width:60%;">{{data.spec.source.git.uri}}</a>
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="media media-sm" ng-if="imageEnable">
                            <div class="media-left">
                                <img class="media-object" src="views/build_detail/img/images_108.png">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">镜像</h4>
                                <small>
                                    <a class="href-orange" style="" ui-sref="console.image_detail({name: data.spec.output.to.name, bc: data.metadata.name})">{{data.spec.output.to.name}}</a>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <uib-tabset class="tab-default tab-jia-default" active="active">
            <uib-tab index="1">
                <uib-tab-heading>
                    <span class="icon20 icon20-log"></span> 构建记录
                </uib-tab-heading>
                <div class="timeline">
                    <ul>
                        <li ng-repeat="item in databuild.items">
                            <label uib-tooltip="{{item.metadata.creationTimestamp | timescon}}">
                                <span class="dot"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                {{item.metadata.creationTimestamp | dateRelative}}
                            </label>
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-sm-2">

                                    <span class="icon12 icon12-{{item.status.phase}}"
                                          ng-class="{'fa-spin': item.status.phase == 'Running' || item.status.phase == 'Pending'}"></span>
                                        <!--switch to Chinese-->
                                        {{item.status.phase | phaseFilter}}
                                    </div>

                                    <div class="col-sm-3 tell" style='position: relative;'>
                                        <div class=till style='position: absolute;top: -30px;padding: 0 8px;border-radius:3px;left: 0;background-color: black;color: white'>
                                            {{data.metadata.name}}:{{item.spec.revision.git.commit | limitTo: 7}}</div>
                                        <div style='white-space:nowrap;overflow: hidden;text-overflow: ellipsis'>
                                            <i class="fa fa-flag-o"></i>&nbsp;
                                            <!--<span ng-if="item.spec.revision.git.ref">-->
                                            <span>{{data.metadata.name}}:{{item.spec.revision.git.commit | limitTo: 7}}</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <span>构建时长:{{item.status.duration | duration}}</span>
                                    </div>
                                    <div class="col-sm-3 text-right">
                                        <a ng-if="item.status.phase == 'Complete'"
                                           ui-sref="console.image_detail({bc: item.metadata.labels.buildconfig, name: item.spec.output.to.name})"
                                           class="icon25 icon25-forward" uib-tooltip="查看镜像"></a>
                                        <a ng-if="item.status.phase !== 'Pending' && item.status.phase !== 'Running' && item.status.phase !== 'New'"
                                           ng-click="delete($index)" class="icon25 icon25-delete" uib-tooltip="删除"
                                           href="javascript:;"></a>
                                        <a ng-if="item.status.phase == 'Pending' || item.status.phase == 'Running' || item.status.phase == 'New'"
                                           ng-click="stop($index)" class="icon25 icon25-stop" uib-tooltip="终止" href="javascript:;"></a>
                                        <a class="icon25 icon25-collapse" uib-tooltip="查看日志" ng-click="getLog($index,item)"
                                           href="javascript:;"></a>
                                    </div>
                                </div>
                            </div>
                            <div uib-collapse="!item.showLog">
                                <div class="well well-log" style='overflow: auto'>
                                    <pre id='sa'>{{item.buildLog}}</pre>
                                </div>
                            </div>


                        </li>
                        <div style="border:1px solid #e5e5e5;padding-top:10px;padding-bottom:10px;background:#f7f8fc;text-align: center;position:relative" ng-if="databuild.items.length===0" class="ng-scope"><p class="blank_block">  <span class="blank_tit">您还没有构建记录</span></p></div>
                    </ul>
                </div>
                <!--<c-timeline name="bcName" type="build"></c-timeline>-->
            </uib-tab>
            <uib-tab index="2">
                <uib-tab-heading>
                    <span class="icon20 icon20-paper"></span> 配置信息
                </uib-tab-heading>
                <form class="form-horizontal" name="frm">
                    <div class="form-group" ng-show="showwebhook">
                        <!--<label class="col-sm-2 text-left" id="autobuild">自动构建触发条件</label>-->
                        <label class="col-sm-3 text-left">是否自动构建</label>
                        <div class="col-sm-2">
                            <!--<c-checkbox checked="grid.checked"></c-checkbox>-->
                            <!--ng-class="{'aciive': grid.checked, 'inactive': gird.uncheked}"-->
                            <span class="my-checkbox">
                                <span class="checkbox-check" ng-class="{active: grid.checked}" ng-click="saveTrigger(grid.checked)">
                                    <span class="check-btn"></span>
                                </span>
                                <!--<span ng-if="text" class="checkbox-text">{{text}}</span>-->
                            </span>
                        </div>

                    </div>
                    <div class="form-group" ng-show="!showwebhook">
                        <!--<label class="col-sm-2 text-left" id="autobuild">自动构建触发条件</label>-->
                        <label class="col-sm-3 text-left" style="color: darkgray">是否自动构建</label>
                        <div class="col-sm-2">
                            <span class="my-checkbox">
                            <span class="checkbox-check">
                                <span class="check-btn"></span>
                            </span>

                        </span>
                            <!--ng-class="{'aciive': grid.checked, 'inactive': gird.uncheked}"-->
                        </div>

                    </div>

                    <div class="form-group" style="padding-top: 30px" ng-if="false">
                        <label class="col-sm-3 text-left">是否持续集成</label>
                        <div class="col-sm-2">
                            <c-checkbox checked="checked"></c-checkbox>
                        </div>
                        <div class="col-sm-7" ng-if="checked">
                            <small style="margin-right: 20px">点击按钮，进行持续集成配置</small>
                            <a class="btn btn-orange">持续集成配置</a>
                        </div>
                    </div>

                    <div class="form-group" style="padding-top: 50px">
                        <label class="col-sm-3 text-left">构建超时时长</label>
                        <div class="col-sm-9">
                            <input ng-model="grid.completionDeadlineMinutes" name="cdm" min="1" max="60" ng-disabled="!deadlineMinutesEnable" style="width: 80px;display: inline-block;" type="number" class="form-control">
                            <span style="display: inline-block;">&nbsp;mins&nbsp;</span>
                            <a href="javascript:;" style="text-decoration: none" ng-click="frm.cdm.$valid && save()">
                                <span class="fa fa-orange" ng-class="{'fa-pencil': !deadlineMinutesEnable, 'fa-check-circle': deadlineMinutesEnable}"></span>
                            </a>
                            <span class="font12">&nbsp;&nbsp;构建超时时长请不要超过60Mins</span><br>
                            <small ng-if="frm.cdm.$invalid" class="fa fa-exclamation-circle" style="font-size: 12px;color: #ec6941;">&nbsp;您设置的时长超过了限制，请重新设置</small>
                        </div>
                    </div>
                </form>
            </uib-tab>
        </uib-tabset>
    </div>

</div>
<style>
    .till{
        display: none;
    }
    .tell:hover>.till{
        display: block;
    }
</style>
